@extends('admin::layouts.master')
@section('content')
    <div class="card" id="app">
        <div class="card-header">商品管理</div>
        <ul role="tablist" class="nav nav-tabs">
            <li class="nav-item"><a href="/buy/good" class="nav-link">商品列表</a></li>
            <li class="nav-item"><a href="#" class="nav-link active">添加商品</a></li>
        </ul>
        <form action="/buy/good" method="post">
            <div class="card-body card-body-contrast">
                @csrf
                {{--商品名称title--}}
                <div class="form-group row">
                    <label for="title" class="col-12 col-sm-3 col-form-label text-md-right">商品名称</label>
                    <div class="col-12 col-md-9">
                        <input id="title" name="title" type="text"
                               value="{{ $good['title']??old('title') }}"
                               class="form-control form-control-sm form-control{{ $errors->has('title') ? ' is-invalid' : '' }}">
                    </div>
                </div>







                {{--所属品牌--}}
                <div class="form-group row pt-1">
                    <label class="col-12 col-sm-3 col-form-label text-sm-right">所属品牌</label>
                    <div class="col-12 col-sm-8 col-lg-3">
                        <select name="brand_id" id="brand" class="form-control">
                            <option>=== 请选择品牌 ===</option>
                            @foreach($brand as $v)
                                <option value="{{$v['id']}}">{{$v['name']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>


                {{--所属分类--}}
                <div class="form-group row pt-1">
                    <label class="col-12 col-sm-3 col-form-label text-sm-right">所属分类</label>
                    <div class="col-12 col-sm-8 col-lg-3">
                        <select name="cate_id" id="threecategory" class="form-control">
                            <option>=== 请选择商品分类 ===</option>
                        </select>
                    </div>
                </div>


                {{--可用属性--}}
                <div class="form-group row pt-1 pb-1" id="keyongAttrs" style="display: none">
                    <label class="col-12 col-sm-3 col-form-label text-sm-right">可用属性</label>
                    <div class="col-12 col-sm-8 col-lg-6 form-check mt-2" id="keyong">
                    </div>
                </div>

                {{--商品图片，注意是多图上传--}}
                <div class="form-group row pt-1 pb-1">
                    <label class="col-12 col-sm-3 col-form-label text-sm-right">商品图片</label>
                    <div class="col-12 col-sm-8 col-lg-6 form-check mt-2">
                        <style>
                            #box img {
                                width: 200px;
                                float: left;
                                margin-right: 10px;
                                border: solid 1px #999;
                                padding: 10px;
                                height: 200px;
                            }
                        </style>
                        <button onclick="upImageMul(this)" class="btn btn-default" type="button">选择图片</button>
                        <div id="box"></div>
                        <input type="text" name="pics" value="" id="pics">
                        <script>
                            require(['hdjs']);

                            //上传图片
                            function upImageMul(obj) {
                                require(['hdjs'], function (hdjs) {
                                    hdjs.image(function (images) {
                                        var pics = '';
                                        $(images).each(function (k, v) {
                                            //组合一个图片地址的字符串
                                            pics += v + ',';
                                            $("<img src='" + v + "'/>").appendTo('#box');
                                        })
                                        //将pics最后的逗号去掉
                                        pics = pics.substr(0,pics.length - 1);
                                        $('#pics').val(pics)

                                    }, {
                                        //上传多图
                                        multiple: true,
                                    })
                                });
                            }
                        </script>
                    </div>
                </div>


                {{--商品详情--}}
                <div class="form-group row pt-1 pb-1">
                    <label class="col-12 col-sm-3 col-form-label text-sm-right">商品详情</label>
                    <div class="col-12 col-sm-12 col-lg-9 form-check mt-2">
                        <textarea id="container" name="content" style="height:300px;width:100%;"></textarea>
                        <script>
                            require(['hdjs'], function (hdjs) {
                                hdjs.ueditor('container', {hash: 2, data: 'hd'}, function (editor) {
                                    console.log('编辑器执行后的回调方法1')
                                });
                            })
                        </script>
                    </div>
                </div>












                {{--商品的市场价--}}
                <div class="form-group row">
                    <label for="goodprice" class="col-12 col-sm-3 col-form-label text-md-right">市场价</label>
                    <div class="col-12 col-md-9">
                        <input id="goodprice" name="goodprice" type="number"
                               value="{{ $good['goodprice']??old('goodprice') }}"
                               class="form-control form-control-sm form-control{{ $errors->has('goodprice') ? ' is-invalid' : '' }}">
                    </div>
                </div>



                {{--商城价--}}
                <div class="form-group row">
                    <label for="mallprice" class="col-12 col-sm-3 col-form-label text-md-right">商城价</label>
                    <div class="col-12 col-md-9">
                        <input id="mallprice" name="mallprice" type="number"
                               value="{{ $good['mallprice']??old('mallprice') }}"
                               class="form-control form-control-sm form-control{{ $errors->has('mallprice') ? ' is-invalid' : '' }}">
                    </div>
                </div>


                {{--是否推荐--}}
                <div class="form-group row">
                    <label for="iscommend" class="col-12 col-sm-3 col-form-label text-md-right"
                           style="padding-top:initial;">是否推荐</label>
                    <div class="col-12 col-md-9">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio"
                                   {{old('iscommend',$good['iscommend'])=='1'?'checked':''}}
                                   name="iscommend" value="1"
                                   id="iscommend-1">
                            <label class="form-check-label" for="iscommend-1">是</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio"
                                   {{old('iscommend',$good['iscommend'])=='0'?'checked':''}}
                                   name="iscommend" value="0"
                                   id="iscommend-0">
                            <label class="form-check-label" for="iscommend-0">否</label>
                        </div>
                        <br>
                    </div>
                </div>



                {{--是否为秒杀商品--}}
                <div class="form-group row">
                    <label for="iskill" class="col-12 col-sm-3 col-form-label text-md-right"
                           style="padding-top:initial;">是否为秒杀商品</label>
                    <div class="col-12 col-md-9">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio"
                                   {{old('iskill',$good['iskill'])=='1'?'checked':''}}
                                   name="iskill" value="1"
                                   id="iskill-1">
                            <label class="form-check-label" for="iskill-1">是</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio"
                                   {{old('iskill',$good['iskill'])=='0'?'checked':''}}
                                   name="iskill" value="0"
                                   id="iskill-0">
                            <label class="form-check-label" for="iskill-0">否</label>
                        </div>
                        <br>
                    </div>
                </div>



            </div>
            <div class="card-footer text-muted">
                <button class="btn btn-primary offset-sm-2">保存提交</button>
            </div>
        </form>
    </div>
@endsection
@section('script')
    {{--Ajax异步获得所有的分类数据--}}
    <script>
        require(['jquery'],function ($) {
            $('#brand').change(function () {

                // 进来之前先把内容增加的节点删掉，否则会已知添加
                $('#threecategory').html('<option>=== 请选择商品分类 ===</option>');

                //获取当前选择的品牌的id
                var id = $(this).find('option:selected').val();
                // alert(id);
                //使用点击的品牌id来发送异步,获取当前点击品牌的可用分类数据
                $.ajax({
                    url:'/good/getbrandcate/'+id,
                    type:'get',
                    datatype:'json',
                    success:function (res) {
                        // 请求时成功
                        // console.log(res);
                        // 这里可以成功接收
                        var html = '';
                        $.each(res,function (k,v) {
                            html += '<option value="' + v.id + '">' + v.name + '</option>';
                        });
                        $('#threecategory').append(html);
                    }
                })
            })

            // 点击三级分类的时候获取可用属性
            $('#threecategory').change(function () {
                //获取当前点击的顶级分类的id
                var id = $(this).find('option:selected').val();
                //发送异步,获取当前分类的可用属性
                $.ajax({
                    url: '/good/getattr/' + id,
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        // console.log(res);
                        var html = '';
                        $.each(res, function (k, v) {
                            html += '<label class="custom-control custom-checkbox custom-control-inline"><input type="checkbox" class="custom-control-input" name="can_id[]" value="' + v.id + '" ><span class="custom-control-label" style="padding-left: 30px">' + v.name + '</span></label>';
                        });
                        $('#keyongAttrs').show();
                        $('#keyong').html(html);
                    }
                })
            })
        })
    </script>


    @endsection